import { Local } from '@/utils/storage';
import { ThemeConfigState } from '@/store/interface/index';
const themeStore = defineStore({
	// 这里的id必须为唯一ID
	id: 'themeStore',
	state: (): ThemeConfigState => {
		return {
			// 是否开启布局配置抽屉
			isDrawer: false,

			/**
			 * 全局主题
			 */
			// 默认 primary 主题颜色
			primary: '#409eff',

			/**
			 * 菜单 / 顶栏
			 * 注意：v1.0.17 版本去除设置布局切换，重置主题样式（initSetLayoutChange），
			 * 切换布局需手动设置样式，设置的样式自动同步各布局，
			 * 代码位置：@/layout/navBars/breadcrumb/setings.vue
			 */
			// 默认顶栏导航背景颜色
			topBar: '#ffffff',
			// 默认顶栏导航字体颜色
			topBarColor: '#606266',
			// 是否开启顶栏背景颜色渐变
			isTopBarColorGradual: false,
			// 默认菜单导航背景颜色
			menuBar: '#545c64',
			// 默认菜单导航字体颜色
			menuBarColor: '#080808',
			// 是否开启菜单背景颜色渐变
			isMenuBarColorGradual: false,
			// 默认分栏菜单背景颜色
			columnsMenuBar: '#545c64',
			// 默认分栏菜单字体颜色
			columnsMenuBarColor: '#e6e6e6',
			// 是否开启分栏菜单背景颜色渐变
			isColumnsMenuBarColorGradual: false,
			// 是否开启分栏菜单鼠标悬停预加载(预览菜单)
			isColumnsMenuHoverPreload: false,
			/**
			 * 界面设置
			 */
			// 是否开启菜单水平折叠效果
			isCollapse: false,
			// 是否开启菜单手风琴效果
			isUniqueOpened: false,
			// 是否开启固定 Header
			isFixedHeader: false,
			// 初始化变量，用于更新菜单 el-scrollbar 的高度，请勿删除
			isFixedHeaderChange: false,
			// 是否开启经典布局分割菜单（仅经典布局生效）
			isClassicSplitMenu: false,
			// 是否开启自动锁屏
			isLockScreen: false,
			// 开启自动锁屏倒计时(s/秒)
			lockScreenTime: 30,

			/**
			 * 界面显示
			 */
			// 是否开启侧边栏 Logo
			isShowLogo: true,
			// 初始化变量，用于 el-scrollbar 的高度更新，请勿删除
			isShowLogoChange: false,
			// 是否开启 Breadcrumb，强制经典、横向布局不显示
			isBreadcrumb: true,
			// 是否开启 Tagsview
			isTagsview: true,
			// 是否开启 Breadcrumb 图标
			isBreadcrumbIcon: false,
			// 是否开启 Tagsview 图标
			isTagsviewIcon: false,
			// 是否开启 TagsView 缓存
			isCacheTagsView: true,
			// 是否开启 TagsView 拖拽
			isSortableTagsView: true,
			// 是否开启 TagsView 共用
			isShareTagsView: false,
			// 是否开启 Footer 底部版权信息
			isFooter: false,
			// 是否开启灰色模式
			isGrayscale: false,
			// 是否开启色弱模式
			isInvert: false,
			// 是否开启深色模式
			isIsDark: false,
			// 是否开启水印
			isWartermark: false,
			// 水印文案
			wartermarkText: '金温系统',

			/**
			 * 其它设置
			 */
			// Tagsview 风格：可选值"<tags-style-one|tags-style-four|tags-style-five>"，默认 tags-style-five
			// 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
			tagsStyle: 'tags-style-five',
			// 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
			animation: 'slide-right',
			// 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round
			columnsAsideStyle: 'columns-round',
			// 分栏布局风格：可选值"<columns-horizontal|columns-vertical>"，默认 columns-horizontal
			columnsAsideLayout: 'columns-vertical',

			/**
			 * 布局切换
			 * 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：@/layout/navBars/breadcrumb/setings.vue
			 * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
			 */
			// 布局切换：可选值"<defaults|classic|transverse|columns>"，默认 defaults
			layout: 'defaults',

			/**
			 * 后端控制路由
			 */
			// 是否开启后端控制路由
			isRequestRoutes: true,

			/**
			 * 全局网站标题 / 副标题
			 */
			// 网站主标题（菜单导航、浏览器当前网页标题）
			globalTitle: 'vue-admin',
			// 网站副标题（登录页顶部文字）
			globalViceTitle: 'vueAdmin',
			// 网站副标题（登录页顶部文字）
			globalViceTitleMsg: '',
			// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
			globalI18n: 'zh-cn',
			// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
			globalComponentSize: 'default',
			// 默认菜单高亮背景色
			menuBarActiveColor: 'rgba(75, 141, 242, 0.2)',
			// 默认菜单鼠标划过时背景色
			menuBarHoverColor: 'rgba(75, 141, 242, 0.2)',
			// 菜单激活时背景颜色 作废
			menuHover: '#ffffff',
			// 菜单激活时字体颜色
			menuActiveColor: '#409EFF',
			//横向布局时菜单激活时字体颜色
			menuHorizontalActiveColor:'#FFFFFF',
			// logo字体颜色
			colorHeaderLogo: '#ffffff',
			defautFontSize: '14px',
			pageColor: '#f8f8f8',
		};
	},
	// 等同于vuex的getter
	getters: {
		getGlobalComponentSize(state) {
			return Local.get('themeConfig')?.globalComponentSize || state.globalComponentSize;
		},
	},
	// pinia 放弃了 mutations 只使用 actions
	actions: {
		// actions可以用async做成异步形式
		setTheme(data: any) {
			if (!data) {
				return;
			}
			this.isDrawer = data.isDrawer;
			if (data.primary) {
				this.primary = data.primary;
			}
			if (data.topBar) {
				this.topBar = data.topBar;
			}
			if (data.topBarColor) {
				this.topBarColor = data.topBarColor;
			}
			this.isTopBarColorGradual = data.isTopBarColorGradual;
			if (data.menuBar) {
				this.menuBar = data.menuBar;
			}
			if (data.menuBarColor) {
				this.menuBarColor = data.menuBarColor;
			}
			if (data.menuBarActiveColor) {
				this.menuBarActiveColor = data.menuBarActiveColor;
			}
			if (data.menuBarHoverColor) {
				this.menuBarHoverColor = data.menuBarHoverColor;
			}
			this.isMenuBarColorGradual = data.isMenuBarColorGradual;
			if (data.columnsMenuBar) {
				this.columnsMenuBar = data.columnsMenuBar;
			}
			if (data.columnsMenuBarColor) {
				this.columnsMenuBarColor = data.columnsMenuBarColor;
			}
			this.isColumnsMenuBarColorGradual = data.isColumnsMenuBarColorGradual;
			this.isCollapse = data.isCollapse;
			this.isUniqueOpened = data.isUniqueOpened;
			this.isFixedHeader = data.isFixedHeader;
			this.isFixedHeaderChange = data.isFixedHeaderChange;
			this.isClassicSplitMenu = data.isClassicSplitMenu;
			this.isLockScreen = data.isLockScreen;
			this.lockScreenTime = data.lockScreenTime;
			this.isShowLogo = data.isShowLogo;
			this.isShowLogoChange = data.isShowLogoChange;
			this.isBreadcrumb = data.isBreadcrumb;
			this.isTagsview = data.isTagsview;
			this.isBreadcrumbIcon = data.isBreadcrumbIcon;
			this.isTagsviewIcon = data.isTagsviewIcon;
			this.isCacheTagsView = data.isCacheTagsView;
			this.isSortableTagsView = data.isSortableTagsView;
			this.isShareTagsView = data.isShareTagsView;
			this.isFooter = data.isFooter;
			this.isGrayscale = data.isGrayscale;
			this.isInvert = data.isInvert;
			this.isIsDark = data.isIsDark;
			this.isWartermark = data.isWartermark;
			this.wartermarkText = data.wartermarkText;

			if (data.tagsStyle) {
				this.tagsStyle = data.tagsStyle;
			}
			if (data.animation) {
				this.animation = data.animation;
			}
			if (data.columnsAsideStyle) {
				this.columnsAsideStyle = data.columnsAsideStyle;
			}
			if (data.columnsAsideLayout) {
				this.columnsAsideLayout = data.columnsAsideLayout;
			}

			if (data.layout) {
				this.layout = data.layout;
			}
			this.isRequestRoutes = data.isRequestRoutes;
			this.globalTitle = data.globalTitle;
			this.globalViceTitle = data.globalViceTitle;
			if (data.globalI18n) {
				this.globalI18n = data.globalI18n;
			}
			if (data.globalComponentSize) {
				this.globalComponentSize = data.globalComponentSize;
			}
			if (data.menuHover) {
				this.menuHover = data.menuHover;
			}
			if (data.menuActiveColor) {
				this.menuActiveColor = data.menuActiveColor;
			}
			if (data.menuHorizontalActiveColor) {
				this.menuHorizontalActiveColor = data.menuHorizontalActiveColor;
			}
			if (data.colorHeaderLogo) {
				this.colorHeaderLogo = data.colorHeaderLogo;
			}

			if (data.defautFontSize) {
				this.defautFontSize = data.defautFontSize;
			}
			if (data.pageColor) {
				this.pageColor = data.pageColor;
			}
		},
		
	},
});
export default themeStore;
